<template>
  <view class="goods-list">
    <view class="goods-item" v-for="item in goods" :key="item.id">
      <image :src="item.image" class="goods-img" />
      <view class="info">
        <text class="name">{{ item.name }}</text>
        <text class="tag" v-if="item.tag">{{ item.tag }}</text>
        <view class="sales">
          <text>月售 {{ item.monthSale }}</text>
          <text>{{ item.discountRate }}折</text>
        </view>
        <view class="price">
          <text class="current">¥{{ item.currentPrice }}</text>
          <text class="original">¥{{ item.originalPrice }}</text>
          <text class="activity" v-if="item.activityPrice">¥{{ item.activityPrice }} 活动</text>
        </view>
        <button 
          class="add-btn" 
          @click="addToCart(item)"
        >+</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({ goods: { type: Array, default: () => [] } })
const emit = defineEmits(['add'])

// 添加到购物车（通过事件传递给父组件）
const addToCart = (item) => {
  emit('add', item)
}
</script>
<style scoped>
.goods-list { flex: 1; padding: 20rpx; background: #fff; }
.goods-item { display: flex; margin-bottom: 24rpx; border-bottom: 1px solid #f5f5f5; padding-bottom: 16rpx; }
.goods-img { width: 200rpx; height: 200rpx; margin-right: 20rpx; }
.info { flex: 1; }
.name { font-size: 32rpx; font-weight: bold; }
.tag { 
  display: inline-block; 
  margin-top: 8rpx; 
  padding: 4rpx 12rpx; 
  font-size: 22rpx; 
  color: #ff6700; 
  background: #fff3e6; 
  border-radius: 6rpx; 
}
.sales { font-size: 22rpx; color: #999; margin-top: 12rpx; display: flex; gap: 20rpx; }
.price { margin-top: 12rpx; display: flex; align-items: baseline; gap: 16rpx; }
.current { font-size: 36rpx; color: #ff6700; }
.original { font-size: 24rpx; color: #999; text-decoration: line-through; }
.activity { font-size: 24rpx; color: #ff6700; }
.add-btn { 
  width: 80rpx; 
  height: 80rpx; 
  line-height: 80rpx; 
  text-align: center; 
  background: #ffd800; 
  border: none; 
  border-radius: 50%; 
  font-size: 48rpx; 
  margin-top: 20rpx; 
}
</style>